<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>时间冒泡和捕获对比</title>
    <style type="text/css">
        body{margin:0;}
        #one{
            width:500px;
            height:500px;
            kground:rgb(255,0,0);
            border: 1px solid transparent;
        }
        #two{
            width:400px;
            height:400px;
            margin: 0 auto;
            margin-top: 50px;
            background:rgb(255,50,50);
            border: 1px solid transparent;
        }
        #three{
            width:300px;
            height:300px;
            margin: 0 auto;
            margin-top: 50px;
            background:rgb(255,100,100);
            border: 1px solid transparent;
        }
        #four{
            width:200px;
            height:200px;
            margin: 0 auto;
            margin-top: 50px;
            background:rgb(255,150,150);
        }
    </style>
</head>
<body>
	<!-- 通过这篇文章可以换很好地了解js的事件冒泡和捕获，以及event事件对象:
		http://www.cnblogs.com/chaoyuehedy/p/5692899.html
	 -->
    <div id='one'>
      <div id='two'>
        <div id='three'>
          <div id='four'>
          </div>
        </div>
      </div>
    </div>

    <script>
        var one = document.getElementById('one');
        var two = document.getElementById('two');
        var three = document.getElementById('three');
        var four = document.getElementById('four');

        var useCapture = true; //false为冒泡获取【目标元素先触发】    true为捕获获取【父级元素先触发】
        one.addEventListener('click', function(event) {
            event || (event = window.event);
            console.log(event);
            console.log('one');
        }, useCapture);
        two.addEventListener('click', function() {
            console.log('two');
        }, useCapture);
        three.addEventListener('click', function() {
            console.log('three');
        }, useCapture);
        four.addEventListener('click', function() {
            console.log('four');
        }, useCapture);     

        /*
        false
        冒泡
        点击four div
        输出结果：four three two one        

        true
        捕获
        点击four div
        输出结果： one two three four
        */
    </script>
</body>
</html>